<template>
  <div class="app-container">
    <!--操作按钮-->
    <div style="padding-bottom: 30px;" class="operation_container">
      <ul>
        <li><el-button size="mini" @click="handleCancel">返回</el-button></li>
      </ul>
    </div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="基本信息" name="1">
        <cus-section class="b-cells" title="基本信息" m-color="#46CDCF" content-height="auto">
          <flex-box :gutter="0" flex-wrap="wrap" style="padding: 10px 8px 0;">
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">仓库编码：</div>
                <div class="b-cell-value">{{data.warehouserCode}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">仓库名称：</div>
                <div class="b-cell-value">{{data.warehouserName}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">仓库类型：</div>
                <div class="b-cell-value">
                  {{ data.warehouseType | warehouseTypeFilter }}
                </div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">联系人姓名：</div>
                <div class="b-cell-value">{{data.contactName}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">联系人电话：</div>
                <div class="b-cell-value">{{data.contactPhone}}</div>
              </flex-box>
            </flex-box-item>
            <flex-box-item :span="0.5" class="b-cell">
              <flex-box align-items="stretch" class="b-cell-b">
                <div class="b-cell-name">联系人邮件：</div>
                <div class="b-cell-value">{{data.contactEmail}}</div>
              </flex-box>
            </flex-box-item>
          </flex-box>
        </cus-section>
      </el-tab-pane>

      <el-tab-pane label="库区配置" name="2">
        <div class="app-container">
          <!-- 高级查询 -->
          <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
            <el-form-item label="库区编号:">
              <!-- v-model="queryParams.warehouserCode"-->
              <el-input v-model="queryParams.warehouserCode"  size="small" placeholder="请输入仓库编码" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="仓库名称:">
              <el-input v-model="queryParams.warehouserName" size="small" placeholder="请输入仓库名称" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="仓库类型:">
              <el-select v-model="queryParams.warehouseType" placeholder="请选择仓库类型" clearable size="small">
                <el-option v-for="option in options.warehouseTypeOptions" :key="option.dictValueCode" :label="option.dictValueName" :value="option.dictValueCode" />
              </el-select>
            </el-form-item>
            <el-form-item label="联系人邮件:">
              <el-input v-model="queryParams.contactEmail" size="small" placeholder="请输入联系人邮件" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item>
              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 工具栏 -->
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button v-hasPermission="['basic:warehouse:insert']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
              <el-button v-hasPermission="['basic:warehouse:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button v-hasPermission="['basic:warehouse:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
            </el-col>-->
            <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
          </el-row>

          <!-- 数据列表 -->
          <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="仓库编码" align="center" prop="warehouseCode" />
            <el-table-column label="库区编码" align="center" prop="areaCode" />
            <el-table-column label="库区名称" align="center" prop="areaName" >
              <template slot-scope="scope">
                <el-button type="text" @click="handleView(scope.row)">{{ scope.row.areaName }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-hasPermission="['basic:warehouse:update']" size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                <el-button v-hasPermission="['basic:warehouse:update']" size="mini" type="text" icon="el-icon-edit" @click="locationAdd(scope.row)">新增库位</el-button>
                <el-button v-hasPermission="['basic:warehouse:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

          <!-- 库区添加/修改对话框 -->
          <el-dialog :title="warehouseAreaFormDialog.title" :visible.sync="warehouseAreaFormDialog.visible" :close-on-click-modal="false" width="580px" append-to-body>
            <el-form ref="warehouseAreaForm" :model="warehouseAreaFormData" :rules="warehouseAreaFormRules" label-width="100px">
              <!-- <el-input v-model="warehouseAreaFormData.warehouseId" :hideInput="false"/> -->
              <el-form-item label="仓库编码" prop="warehouseCode">
                <el-input v-model="warehouseAreaFormData.warehouseCode" placeholder="请输入仓库编码" v-bind:disabled="true" />
              </el-form-item>
              <el-form-item label="库区编码" prop="areaCode">
                <el-input v-model="warehouseAreaFormData.areaCode" placeholder="请输入库区编码" />
              </el-form-item>
              <el-form-item label="库区名称" prop="areaName">
                <el-input v-model="warehouseAreaFormData.areaName" placeholder="请输入仓库名称" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="confirmWarehouseAreaFormDialog">确 定</el-button>
              <el-button @click="resetWarehouseAreaFormDialog">取 消</el-button>
            </div>
          </el-dialog>

          <!-- 库位添加/修改对话框 -->
          <el-dialog :title="locationFormDialog.title" :visible.sync="locationFormDialog.visible" :close-on-click-modal="false" width="580px" append-to-body>
            <el-form ref="locationForm" :model="locationFormData" :rules="locationFormRules" label-width="100px">

              <el-form-item label="库区编码" prop="areaCode">
                <el-input v-model="locationFormData.areaCode" placeholder="请输入仓库编码" v-bind:disabled="true" />
              </el-form-item>
              <el-form-item label="库位编码" prop="locationNo">
                <el-input v-model="locationFormData.locationNo" placeholder="请输入库位编码" />
              </el-form-item>
              <el-form-item label="组合标签内容" prop="locationName">
                <el-input v-model="locationFormData.locationName" placeholder="请输入组合标签内容" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="confirmLocationFormDialog">确 定</el-button>
              <el-button @click="resetLocationFormFormDialog">取 消</el-button>
            </div>
          </el-dialog>


          <!-- 库位列表 -->
          <el-dialog :title="locationListDialog.title" :visible.sync="locationListDialog.visible" :close-on-click-modal="false"
              width="900px" append-to-body >
            <!-- 数据列表 -->
            <el-table v-loading="loading" :data="locationPage.records" highlight-current-row @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55" align="center" />

              <!-- <el-table-column label="库区编码" align="center" prop="area" /> -->
              <el-table-column label="库位编码" align="center" prop="locationNo" />
              <el-table-column label="组合标签内容" align="center" prop="locationName" />

              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button v-hasPermission="['basic:warehouse:update']" size="mini" type="text" icon="el-icon-edit" @click="locationEdit(scope.row)">修改</el-button>
                  <el-button v-hasPermission="['basic:warehouse:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove1(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer locationList">
              <!-- 分页 -->
              <pagination v-show="locationPage.total>0" :total="locationPage.total" :page.sync="locationPage.current" :limit.sync="locationPage.pageSize" @pagination="locationListQuery" />
            </div>

          </el-dialog>


        </div>
      </el-tab-pane>


      <el-tab-pane label="仓库管理员" name="3">
        <div class="app-container">
          <!-- 高级查询 -->
          <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
            <el-form-item label="名称:">
              <!-- v-model="queryParams.warehouserCode"-->
              <el-input v-model="TbUserWarehouseManagerMapParams.userName"  size="small" placeholder="请输入仓库编码" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 工具栏 -->
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button v-hasPermission="['basic:warehouse:insert']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd1">新增</el-button>
            </el-col>

            <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
          </el-row>

          <!-- 数据列表 -->
          <el-table v-loading="loading" :data="page1.records" highlight-current-row>
            <!-- <el-table-column type="selection" width="55" align="center" /> -->

            <el-table-column label="仓库名称" align="center" prop="warehouserName" />
            <el-table-column label="用户名称" align="center" prop="userName" />

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-hasPermission="['basic:warehouse:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove2(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination v-show="page1.total>0" :total="page1.total" :page.sync="page1.current" :limit.sync="page1.pageSize" @pagination="handleQuery" />

          <!-- 仓库管理人员/修改对话框 -->
          <el-dialog :title="TbUserWarehouseManagerMapDialog.title" :visible.sync="TbUserWarehouseManagerMapDialog.visible" :close-on-click-modal="false" width="400px" append-to-body>
            <el-form ref="TbUserWarehouseManagerMapForm" :model="TbUserWarehouseManagerMapFormData" :rules="TbUserWarehouseManagerMapFormRules" label-width="100px">

              <el-form-item label="用户:" prop="userId">
                <!-- <el-input v-model="TbUserWarehouseManagerMapFormData.warehouseCode" placeholder="请输入仓库编码" v-bind:disabled="true" /> -->
                <el-select v-model="TbUserWarehouseManagerMapFormData.userId"  clearable placeholder="请选择用户">
                  <el-option v-for="option in options.userSelect" :key="option.id" :label="option.nickName" :value="option.id" />
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="confirmTbUserWarehouseManagerMapDialog">确 定</el-button>
              <el-button @click="resetTbUserWarehouseManagerMapDialog">取 消</el-button>
            </div>
          </el-dialog>

        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import appConstant from '@/constant/AppConstant'
import WarehouseApi from '@/api/basic/WarehouseApi'
import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'
import WarehouseAreaApi from '@/api/web/WarehouseAreaApi'
import TbUserWarehouseManagerMapApi from '@/api/basic/TbUserWarehouseManagerMapApi'
import BaseInfoMixin from '@/mixins/BaseInfo'
import UserApi from '@/api/system/UserApi'

const defaultWarehouseAreaFormData = {
  warehouseCode: null,
  warehouseId: null,
  descNo: null,
  areaCode: null,
  areaName: null
}
const defaultLocationFormData = {
  warehouseCode: null,
  areaCode: null,
  locationNo: null,
  locationName: null,
  area: null
}
export default {
  components: {

  },
  mixins: [BaseInfoMixin],
  filters: {
    warehouseTypeFilter(item) {
      const values = appConstant.genWarehouseTypeOptions.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    }
   },
  data() {
    return {
      activeName: '1',
      selects: {},
      options: {
        userSelect: null
      },
      operation: undefined,
      data: {
        isValid: appConstant.Y
      },
      queryParams: {
        warehouserCode: null,
        warehouseId: null,
        isValid: this.$constant.Y
      },
      locationQueryParams: {
        areaId: null,
        isValid: this.$constant.Y
      },
      TbUserWarehouseManagerMapParams: {
        userName: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      page1: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      locationPage: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      warehouseAreaFormDialog: {
        title: '',
        visible: false
      },
      TbUserWarehouseManagerMapDialog: {
        title: '',
        visible: false
      },
      TbUserWarehouseManagerMapFormData: {
        warehouseId: null,
        userId: null
      },
      TbUserWarehouseManagerMapFormRules: {},
      warehouseAreaFormData: Object.assign({}, defaultWarehouseAreaFormData),
      warehouseAreaFormRules: {},
      locationFormDialog: {
        title: '',
        visible: false
      },
      locationFormData:  Object.assign({}, defaultLocationFormData),
      locationFormRules: {},
      locationListDialog: {
        title: '库位列表',
        visible: false
      },
      loading: false,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.initForm()
    this.loadSelects()
    this.handleQuery()
  },
  methods: {
    initForm() {
      const id = this.$route.params.id
      WarehouseApi.get(id).then(response => {
        this.data = response.data
      })
    },
    loadSelects() {
      UserApi.list().then(response =>{
        this.options.userSelect = response.data
      })
    },
    handleQuery() {
      this.loading = true

      //this.queryParams.warehouserCode = this.data.warehouserCode
      this.queryParams.warehouseId = this.$route.params.id
      WarehouseAreaApi.page(this.queryParams, this.page).then(response => {

        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })

      this.TbUserWarehouseManagerMapParams.warehouseId = this.$route.params.id
      TbUserWarehouseManagerMapApi.page(this.TbUserWarehouseManagerMapParams,this.page1).then(response =>{
        console.log(response)
        this.page1.records = response.data.records
        this.page1.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })

    },
    locationListQuery() {
      this.loading = true

      TbWmsLocationApi.page(this.locationQueryParams, this.locationPage).then(response => {

        this.locationPage.records = response.data.records
        this.locationPage.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })

    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },

    handleSelectionChange1(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return WarehouseAreaApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleRemove1(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TbWmsLocationApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleRemove2(row) {
      const ids = row.id
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TbUserWarehouseManagerMapApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    confirmWarehouseAreaFormDialog() {
      this.$refs['warehouseAreaForm'].validate(valid => {
        if (valid) {
          if (this.warehouseAreaFormData.id) {
            console.log(this.warehouseAreaFormData)
            WarehouseAreaApi.edit(this.warehouseAreaFormData).then(response => {
              this.$message.success('修改成功')
              this.warehouseAreaFormDialog.visible = false
              this.handleQuery()
            })
          } else {
            WarehouseAreaApi.add(this.warehouseAreaFormData).then(response => {
              this.$message.success('添加成功')
              this.warehouseAreaFormDialog.visible = false
              this.handleQuery()
            })
          }
        }
      })
    },
    resetWarehouseAreaFormDialog() {
      this.warehouseAreaFormDialog = {
        title: '',
        visible: false
      }
      this.warehouseAreaFormData = Object.assign({}, defaultWarehouseAreaFormData)
      this.resetForm('warehouseAreaForm')
    },

    confirmTbUserWarehouseManagerMapDialog() {
      this.$refs['TbUserWarehouseManagerMapForm'].validate(valid => {
        if (valid) {
          if (this.TbUserWarehouseManagerMapFormData.id) {
            console.log(this.TbUserWarehouseManagerMapFormData)
            TbUserWarehouseManagerMapApi.edit(this.TbUserWarehouseManagerMapFormData).then(response => {
              this.$message.success('修改成功')
              this.TbUserWarehouseManagerMapDialog.visible = false
              this.handleQuery()
            })
          } else {
            TbUserWarehouseManagerMapApi.add(this.TbUserWarehouseManagerMapFormData).then(response => {
              this.$message.success('添加成功')
              this.TbUserWarehouseManagerMapDialog.visible = false
              this.handleQuery()
            })
          }
        }
      })
    },
    resetTbUserWarehouseManagerMapDialog() {
      this.TbUserWarehouseManagerMapDialog = {
        title: '',
        visible: false
      }
      this.TbUserWarehouseManagerMapFormData = {
        warehouseId: null,
        userId: null
      }
      this.resetForm('TbUserWarehouseManagerMapForm')
    },

    confirmLocationFormDialog() {
      this.$refs['locationForm'].validate(valid => {
        if (valid) {
          if (this.locationFormData.id) {
            TbWmsLocationApi.edit(this.locationFormData).then(response => {
              this.$message.success('修改成功')
              this.locationFormDialog.visible = false
              this.handleQuery()
            })
          } else {
            TbWmsLocationApi.add(this.locationFormData).then(response => {
              this.$message.success('添加成功')
              this.locationFormDialog.visible = false
              this.handleQuery()
            })
          }
        }
      })
    },
    resetLocationFormFormDialog() {
      this.locationFormDialog = {
        title: '',
        visible: false
      }
      this.locationFormData = Object.assign({}, defaultLocationFormData)
      this.resetForm('locationForm')
    },


    handleAdd(){
      this.openWarehouseAreaFormDialog()
    },
    handleAdd1(){
      this.openTbUserWarehouseManagerMapDialog()
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openWarehouseAreaFormDialog(id)
    },
    locationAdd(row){
      this.openLocationFormDialog(false,row.areaCode,row.id)
    },
    locationEdit(row){
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openLocationFormDialog(id,row.areaCode,row.areaId)
    },
    openLocationFormDialog(id,areaCode,areaId) {
      this.resetLocationFormFormDialog()
      this.locationFormDialog.visible = true
      this.locationFormData.areaCode = areaCode
      this.locationFormData.area = areaId
      this.locationFormData.warehouseCode = this.data.id

      if (id) {
        this.locationFormDialog.title = '库位-修改'
        TbWmsLocationApi.get(id).then(response => {
          this.locationFormData = {
            ...this.locationFormData,
            ...response.data
          }
        })
      } else {
        this.locationFormDialog.title = '库位-添加'
      }
    },
    openWarehouseAreaFormDialog(id) {
      this.resetWarehouseAreaFormDialog()
      this.warehouseAreaFormDialog.visible = true
      this.warehouseAreaFormData.warehouseCode = this.data.warehouserCode
      this.warehouseAreaFormData.warehouseId = this.data.id
      console.log(this.data.id)
      if (id) {
        this.warehouseAreaFormDialog.title = '库区-修改'
        WarehouseAreaApi.get(id).then(response => {
          this.warehouseAreaFormData = {
            ...this.warehouseAreaFormData,
            ...response.data
          }
        })
      } else {
        this.warehouseAreaFormDialog.title = '库区-添加'
      }
    },
    openTbUserWarehouseManagerMapDialog(id) {
      this.resetTbUserWarehouseManagerMapDialog()
      this.TbUserWarehouseManagerMapDialog.visible = true

      this.TbUserWarehouseManagerMapFormData.warehouseId = this.data.id


      if (id) {
        this.TbUserWarehouseManagerMapDialog.title = '管理人员-修改'
        TbUserWarehouseManagerMapApi.get(id).then(response => {
          this.TbUserWarehouseManagerMapFormData = {
            ...this.TbUserWarehouseManagerMapFormData,
            ...response.data
          }
        })
      } else {
        this.TbUserWarehouseManagerMapDialog.title = '管理人员-添加'
      }
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleView(row) {
      this.locationQueryParams.area = row.id
      this.locationListQuery()
      this.locationListDialog.visible = true
    },
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .b-cont {
    position: relative;
    padding: 0 50px 20px 20px;
  }
  .b-cells {
    margin-top: 25px;
  }
  .locationList{
    padding-bottom:50px;
  }
  .b-cell {
    padding: 0 10px;
    overflow: hidden;
    .b-cell-b {
      width: auto;
      padding: 8px;
      .b-cell-name {
        width: 110px;
        margin-right: 10px;
        font-size: 13px;
        flex-shrink: 0;
        color: #777;
      }
      .b-cell-name2 {
        width: 100%;
        margin-right: 10px;
        font-size: 13px;
        flex-shrink: 0;
        color: #777;
      }
      .b-cell-value {
        font-size: 13px;
        color: #333;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .b-cell-foot {
        flex-shrink: 0;
        display: block;
        width: 15px;
        height: 15px;
        margin-left: 8px;
      }
    }
  }

  .f-item {
    padding: 3px 0;
    height: 25px;
    .f-img {
      position: block;
      width: 15px;
      height: 15px;
      padding: 0 1px;
      margin-right: 8px;
    }
    .f-name {
      color: #666;
      font-size: 12px;
      margin-right: 10px;
    }
  }
</style>
